<template>
    <page-box class="container">
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <div class="project-statistics">
            <div class="item">
                <p class="tips">项目状态（执行中）</p>
                <div class="content">
                    <div>
                        <p>
                            {{
                                statisticsData.进度状态
                                    ? statisticsData.进度状态.正常
                                    : 0
                            }}
                        </p>
                        <span>正常</span>
                    </div>
                    <div>
                        <p>
                            {{
                                statisticsData.进度状态
                                    ? statisticsData.进度状态.提前
                                    : 0
                            }}
                        </p>
                        <span>提前</span>
                    </div>
                    <div>
                        <p>
                            {{
                                statisticsData.进度状态
                                    ? statisticsData.进度状态.延迟
                                    : 0
                            }}
                        </p>
                        <span>延迟</span>
                    </div>
                </div>
            </div>
            <div class="item">
                <p class="tips">项目类型（执行中）</p>
                <div class="content">
                    <div>
                        <p>
                            {{
                                statisticsData.项目类型
                                    ? statisticsData.项目类型.民生服务项目
                                    : 0
                            }}
                        </p>
                        <span>民生服务项目</span>
                    </div>
                    <div>
                        <p>
                            {{
                                statisticsData.项目类型
                                    ? statisticsData.项目类型.工程建设项目
                                    : 0
                            }}
                        </p>
                        <span>工程建设项目</span>
                    </div>
                </div>
            </div>
            <div class="item">
                <p class="tips">投资情况</p>
                <div class="content">
                    <div>
                        <p>
                            {{
                                statisticsData.投资额
                                    ? statisticsData.投资额.总投资额 / 10000
                                    : 0
                            }}
                        </p>
                        <span>总投资额（万元）</span>
                    </div>
                    <div>
                        <p>
                            {{
                                statisticsData.投资额
                                    ? statisticsData.投资额.已完成投资额 / 10000
                                    : 0
                            }}
                        </p>
                        <span>已完成投资额（万元）</span>
                    </div>
                    <div>
                        <p>
                            {{
                                statisticsData.投资额
                                    ? statisticsData.投资额.执行总投资额 / 10000
                                    : 0
                            }}
                        </p>
                        <span>未完成投资额（万元）</span>
                    </div>
                </div>
            </div>
        </div>
        <page-search-column class="fixed-column">
            <page-search-item>
                <el-input
                    v-model="projectName"
                    class="pbb__search-input"
                    prefix-icon="el-icon-search"
                    placeholder="项目名称"
                    clearable
                ></el-input>
            </page-search-item>
            <page-search-item>
                <el-button
                    type="primary"
                    class="pbb__search-btn"
                    @click="handleSearch()"
                >
                    搜索
                </el-button>
            </page-search-item>
            <page-search-item>
                <el-button @click="handleCreateItem()" icon="el-icon-plus">
                    新建项目
                </el-button>
            </page-search-item>
            <page-search-item class="right">
                <el-link type="primary" class="map-btn" @click="toMap"
                    >地图模式</el-link
                >
            </page-search-item>
        </page-search-column>
        <div class="project-list-container">
            <div class="project-list-container-table">
                <ask-empty-text
                    style="min-height: 400px;"
                    v-if="tableData.length === 0"
                >
                </ask-empty-text>
                <el-table
                    v-else
                    :data="tableData"
                    class="pbb__table"
                    header-cell-class-name="pbb__table-thead"
                    cell-class-name="pbb__table-thead-cell"
                    row-class-name="pbb__table-thead-row"
                    style="width: 100%;"
                >
                    <el-table-column
                        label="序号"
                        align="center"
                        type="index"
                        width="60"
                    >
                    </el-table-column>
                    <el-table-column
                        label="项目名称"
                        align="center"
                        min-width="120"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <el-link
                                type="primary"
                                @click="handleRouterDetails(scope)"
                                >{{ scope.row.name }}</el-link
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="项目类型"
                        align="center"
                        width="120"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.type === 1"
                                >招商引资项目</span
                            >
                            <span v-if="scope.row.type === 2"
                                >工程建设项目</span
                            >
                            <span v-if="scope.row.type === 3"
                                >民生服务项目</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="endDate"
                        align="center"
                        label="项目完成时间"
                        width="120"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <!-- <el-table-column
                        prop="investor"
                        align="center"
                        label="投资方"
                        width="100"
                        show-overflow-tooltip
                    >
                    </el-table-column> -->
                    <el-table-column
                        label="投资总金额（万元）"
                        align="center"
                        width="160"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.totalInvestment / 10000 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="leadName"
                        align="center"
                        label="牵头领导"
                        width="100"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        prop="responsible"
                        align="center"
                        label="责任单位/人"
                        width="120"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        prop="stageName"
                        align="center"
                        label="当前阶段"
                        width="100"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <!-- <el-table-column
                        label="项目进度"
                        width="100"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.process || 0 }}%</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column
                        label="进度状态"
                        width="100"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                style="color:#de2728"
                                v-if="scope.row.completeStatus === 1"
                                >延迟({{ scope.row.process || 0 }}%)</span
                            >
                            <span
                                style="color:#32A78F"
                                v-if="scope.row.completeStatus === 2"
                                >正常({{ scope.row.process || 0 }}%)</span
                            >
                            <span
                                style="color:#32A78F"
                                v-if="scope.row.completeStatus === 3"
                                >提前({{ scope.row.process || 0 }}%)</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="项目状态"
                        width="100"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <span
                                style="color:#32A78F"
                                v-if="scope.row.status === 2"
                                >已完成</span
                            >
                            <span
                                style="color:#2C82C9"
                                v-if="scope.row.status === 1"
                                >执行中</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="updateTime"
                        align="center"
                        label="更新时间"
                        width="220"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        width="180"
                    >
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click="handleUpdateProcess(scope)"
                                >填进度</el-button
                            >
                            <el-button
                                v-if="scope.row.status === 1"
                                type="text"
                                size="small"
                                @click="finishProject(scope.row)"
                                >结束</el-button
                            >
                            <el-button
                                v-if="scope.row.self"
                                type="text"
                                size="small"
                                @click="handleEdit(scope)"
                                >编辑</el-button
                            >
                            <el-button
                                v-if="scope.row.self"
                                type="text"
                                size="small"
                                @click="handleDelete(scope)"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <template v-slot:footer v-if="total > 0">
            <pagination
                :total="total"
                :page.sync="currentPage"
                :limit.sync="pageSize"
                @pagination="getTable"
            />
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "ProjectList"
})
export default class ProjectList extends Vue {
    // 搜索项目的名称
    projectName = "";
    // 表格数据以及各项参数
    currentPage = 1;
    pageSize = 10;
    pageCount = 0;
    total = 0;
    tableData: any[] = [];
    statisticsData = {};

    created() {
        const data = {
            currentPage: this.currentPage,
            pageSize: this.pageSize
        };
        this.getTableData(data);
        this.getCountDetail();
    }

    async getCountDetail() {
        const res = await this.$server["project/countDetail"]({});
        if (res.data.code === 200) {
            this.statisticsData = res.data.data;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 编辑项目
    handleEdit(scope: any) {
        this.$router.push({
            name: "AddItem",
            query: {
                id: scope.row.id
            }
        });
    }

    // 完成项目
    finishProject(row: any) {
        this.$confirm("是否确认当前项目已完成", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(async() => {
                const res = await this.$server["project/finishProject"]({
                    data: {
                        projectId: row.id
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("操作成功");
                    const data = {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    };
                    this.getTableData(data);
                    this.getCountDetail();
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            })
            .catch();
    }

    // 更新进度
    handleUpdateProcess(scope: any) {
        this.$router.push({
            name: "ProjectProcess",
            query: {
                id: scope.row.id
            }
        });
    }

    // 删除项目
    handleDelete(scope: any) {
        this.$confirm("此操作将永久删除该项目, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(async() => {
                const res = await this.$server["project/deleteProject"]({
                    data: {
                        projectId: scope.row.id
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("删除成功");
                    const data = {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    };
                    this.getTableData(data);
                    this.getCountDetail();
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            })
            .catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });
    }

    // 获取表格的总数据
    async getTableData(data: any) {
        const res = await this.$server["project/getData"]({
            data: data
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        }
    }

    // 跳转详情页
    handleRouterDetails(scope: any) {
        this.$router.push({
            name: "ProjectDetails",
            query: {
                id: scope.row.id
            }
        });
    }

    // 搜索表格的某一条数据
    handleSearch() {
        const data = {
            currentPage: 1,
            pageSize: 10,
            name: this.projectName
        };
        this.getTableData(data);
    }

    // 分页
    getTable(val: any) {
        const data = {
            currentPage: val.page,
            pageSize: val.limit
        };
        this.getTableData(data);
    }

    // 跳转到新建项目页面
    handleCreateItem() {
        this.$router.push({
            name: "AddItem"
        });
    }

    toMap() {
        this.$router.push({
            name: "ProjectMap"
        });
    }
}
</script>
<style lang="scss" scoped>
.container {
    ::v-deep {
        .page-base-body {
            background-color: transparent;
        }
    }
}
.project-list-container {
    width: 100%;
    height: calc(100% - 178px);
    position: relative;
    background: #fff;
    &-table {
        margin-top: 10px;
        height: 100%;
        overflow-y: auto;
        /deep/.el-table {
            .el-button {
                &.default {
                    color: #32A78F;
                }
            }
        }
    }
}
.project-statistics {
    @include flexLayout(flex, justify, center);
    margin-bottom: 10px;
    .item {
        width: 36%;
        padding: 10px;
        height: 110px;
        border-radius: 5px;
        background: #fff;
        .tips {
            margin: 0 0 7px 0;
            font-size: 14px;
            font-family: "PingFang SC Medium";
            line-height: 20px;
            color: #37383a;
            padding-left: 10px;
            border-left: 6px solid #de2728;
        }
        .content {
            @include flexLayout(flex, justify, top);
            div {
                width: 33%;
                p {
                    margin: 0;
                    font-size: 28px;
                    font-family: "PingFang SC";
                    font-weight: bold;
                    line-height: 40px;
                    height: 40px;
                    color: #de2728;
                    text-align: center;
                    @include textEllipsis();
                }
                span {
                    display: block;
                    font-size: 14px;
                    font-family: "PingFang SC Medium";
                    line-height: 16px;
                    color: #37383a;
                    text-align: center;
                }
            }
        }
        &:nth-child(2) {
            width: 22%;
            .content {
                div {
                    width: 50%;
                }
            }
        }
    }
}
.map-btn {
    text-decoration: underline #de2728;
}
</style>
